<template>
    <div class="board_container">
        <h1>'.'present empty, '@' present Black, '.' , 'O' present White</h1>
        MAX_ROWS⚠️: <input type="number" v-model="MAX_ROWS" placeholder="MAX_ROWS">
        MAX_COLS⚠️: <input type="number" v-model="MAX_COLS" placeholder="MAX_ROWS">
        <button @click="init()">Reset</button>
        <div v-for="(row, index_row) in board" :key="index_row" class="board_row">
            <span class="board_col" v-for="(col, index_col) in row" :key="index_col"
                @click="handleClick(index_row, index_col)">
                {{ col }}
            </span>
        </div>
        <div class="board_win_count">
            <span>White:{{white_count}}</span> |
            <span>Black:{{black_count}}</span>
        </div>
    </div>
</template>


<script setup>
import { onMounted, reactive, ref, watch } from 'vue';

// data
//  const data 
const UPPER_BOUND = 30;
const LOWER_BOUND = 1;
const direction = [
    [[0, 1], [0, -1]],
    [[1, 1], [-1, -1]],
    [[1, -1], [-1, 1]],
    [[1, 0], [-1, 0]],
];
// response data
let MAX_ROWS = ref(15);
let MAX_COLS = ref(15);
let switch_player = ref(1);
let board = ref([]);
let black_count = ref(0);
let  white_count = ref(0);

// methods
const init = () => {
    board.value = Array.from({ length: MAX_ROWS.value }, () => Array.from({ length: MAX_COLS.value }, () => '.'));
};

const handleClick = (row, col) => {
    if (board.value[row][col] !== '.') {
        return window.alert("Invalid move, Please choose another position");
    }

    board.value[row][col] = switch_player.value === 1 ? 'O' : '@';
    if (checkWin(row, col)) {
        const winner = switch_player.value === 1 ? 2 : 1;
        window.alert(`Congratulations ㊗️ You Win!!! player ${winner}`);
        updateWinCount(winner);
        init();
    }
    switch_player.value = 3 - switch_player.value; // 切换玩家
};

const updateWinCount = (winner) => {
    if (winner === 1) {
        black_count.value++;
    } else {
        white_count.value++;
    }
};

const checkWin = (row, col) => {
    for (const dir of direction) {
        let count = 1;
        for (const [dx, dy] of dir) {
            let x = row + dx;
            let y = col + dy;

            while (x >= 0 && x < MAX_ROWS.value && y >= 0 && y < MAX_COLS.value && board.value[x][y] === board.value[row][col]) {
                count++;
                x += dx;
                y += dy;
            }
        }
        if (count >= 5) return true;
    }
    return false;
};

// life cycle  
onMounted(() => {
    init();
});

watch([MAX_ROWS, MAX_COLS], (newBounds) => {
    const [newRows, newCols] = newBounds;
    if (newRows >= LOWER_BOUND && newRows <= UPPER_BOUND && newCols >= LOWER_BOUND && newCols <= UPPER_BOUND) {
        init();
    } else {
        window.alert(`Invalid input, please choose a number between ${LOWER_BOUND} and ${UPPER_BOUND}`);
    }
});

</script>


<style>
.board_container {
    margin: auto;
}

.board_row {
    display: flex;
    justify-content: space-evenly;
    justify-items: center;
    align-items: center;
    margin-top: 10px;
    gap: 20px;
}

.board_col {
    border-width: 10px;
    width: 30px;
    height: 30px;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    text-shadow: 1px 1px 0 #000;
    background-color: rgb(80, 79, 73);
}

.board_col:hover {
    background-color: #f0f0f0;
}
</style>